<template>
  <div class='container'>
    <el-card>
      <!-- 头部搜索栏 -->
      <el-row type="flex">
        <el-col :span="24">
          <el-form ref="form" :model="form" label-width="80px">
            <el-row type="flex" justify="space-between">
              <el-col :span="5">
                <el-form-item label="关键字">
                  <el-input v-model="form.keyword" size="small" placeholder="根据编号搜索"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item>
                  <el-row type="flex" justify="end">
                    <el-col :span="15">
                      <el-button size="small" @click="onclear">清除</el-button>
                    </el-col>
                    <el-col>
                      <el-button size="small" type="primary" @click="onSubmit">搜索</el-button>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>
      <!-- 头部搜索结束 -->
      <!-- 头部提示 -->
      <el-alert :title="this.alert" type="info" show-icon :closable="false">
      </el-alert>
      <!-- 头部数量提示结束 -->
      <!-- 列表栏 -->
      <el-table
      :data="list"
      style="width: 100%">
        <el-table-column
          prop="id"
          label="编号"
          width="200">
        </el-table-column>
        <el-table-column
          prop="questionType"
          :formatter="formatter"
          label="题型"
          width="150">
        </el-table-column>
        <el-table-column
          label="题目编号"
          width="300">
          <template slot-scope="{ row }">
            <el-button type="text" v-for="item in row.questionIDs" :key="item.number" @click="previewOnclicke(item)" >{{ item.number }}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="addTime"
          label="录入时间"
          width="250">
        </el-table-column>
        <el-table-column
          prop="totalSeconds"
          label="答题时间(S)"
          width="150">
        </el-table-column>
        <el-table-column
          prop="accuracyRate"
          label="正确率(%)">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="录入人">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="{ row }">
            <el-button type="danger" icon="el-icon-delete" circle @click="clear(row.id)"></el-button>
          </template>
        </el-table-column>
    </el-table>
      <!-- 列表栏结束 -->
      <!-- 分页组件 -->
      <el-row type="flex" justify="end">
        <el-col :span="12">
          <div class="block">
            <el-pagination
              layout="prev, pager, next, sizes, jumper"
              :page-sizes="[20, 30, 40, 50, 100]"
              :page-size="20"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :total="total">
            </el-pagination>
          </div>
        </el-col>
      </el-row>
      <!-- 分页组件结束 -->
      <!-- 预览弹框 -->
      <el-dialog title="题目预览" :visible.sync="previewVisible" width="70%">
        <questions-view
          :questionID="questionID"
          v-if="previewVisible"
          @close="previewVisible = false"
        ></questions-view>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions'
import { questionType } from '@/api/hmmm/constants'
// 导入预览组件
import QuestionsView from '../components/questions-preview'
export default {
  data() {
    return {
      previewVisible: false, // 预览弹窗
      form: {
        page: 1,
        pagesize: 20,
        keyword: ''
      },
      alert: '', // 数量提示信息
      list: [],  // 列表数据
      total: 0
    }
  },
  created(){
    this.randoms()
  },
  components: {
    QuestionsView
  },
  methods: {
    // 预览弹框
    previewOnclicke(item) {
      this.previewVisible = true

      this.questionID = item.id
    },
    handleSizeChange(val) {
      this.form.pagesize = val
      this.randoms()
    },
    handleCurrentChange(val) {
      this.form.page = val
      this.randoms()
    },
    onclear(){
      this.form.keyword = ''
    },
    onSubmit() {
      this.randoms()
    },
    async randoms(){
      const { data }  = await randoms(this.form)
      this.list = data.items
      this.total = data.counts
      this.alert = `数据一共${data.counts}条` 
    },
    formatter(row, column, cellValue, index) {
      let label
        questionType.forEach(item => {
          if (cellValue == item.value) {
            label = item.label
          }
        })
        return label
    },
    clear(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then( async () => {
          await removeRandoms({id})
          this.randoms()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
    }
  }
}
</script>

<style scoped>
.container {
  margin: 15px;
}
/deep/.el-row {
  margin-top: 0px;
}
.el-button+.el-button {
  margin-left: 0px;
}
.block {
  margin-top: 20px;
}
</style>
